<template>
  <ul class="warn-timeline">
    <li class="warn-timeline-item" v-for="(val, index) in TimeLine" :key="index" v-show="(index < count)">
      <div class="warn-timeline-item-tail" v-if="index!==TimeLine.length-1"></div>
      <div class="warn-timeline-item-head"></div>
      <div class="warn-timeline-triangle"><span></span></div>
      <div class="warn-timeline-time-date">{{val.r_time.substring(0,10)}}</div>
      <div class="warn-timeline-time-hour">{{val.r_time.substring(10)}}</div>
      <div class="timeline-item-content">
          <div class="timeline-source">
            <span class="time-title">{{val.analysis_source}}</span>
            <div>
              <div v-if="val.analysis_source==='自动分析' || val.analysis_source==='重新定义规则后自动分析'">
                <div class="timeline-source-content">
                  <span class="timeline-source-title">匹配规则:</span>
                  <span class="timeline-source-text">{{val.match_rule}}</span>
                 </div>
                <div class="timeline-source-content">
                  <span class="timeline-source-title">提交人:</span>
                  <span class="timeline-source-text">{{val.r_person}}</span>
                </div>
              </div>
              <div v-else-if="val.analysis_source==='深度分析'">
                <div class="timeline-source-content">
                  <span class="timeline-source-title">分析状态:</span>
                  <span class="timeline-source-text">{{val.analysis_state==='0'?'分析中':val.analysis_state==='1'?'已完成':''}}</span>
                </div>
                <div class="timeline-source-content">
                  <span class="timeline-source-title">分析结论:</span>
                  <span class="timeline-source-text">{{val.analysis_result}}</span>
                </div>
                <div class="timeline-source-content" v-if="val.analysis_result==='生成风险事项'">
                    <span class="timeline-source-title" style="display: block;float: left;">风险事项名称:</span>
                   <span class="timeline-source-text" style="color:#1f92ef;cursor:pointer;display: block;float: left;max-width: 233px;word-break: break-all;" @click="goRiskEvents(val.risk_event_id)">{{val.risk_event_name}}</span>
                   <div class="clear-float"></div>
                </div>
                <div class="timeline-source-content">
                  <span class="timeline-source-title">提交人:</span>
                  <span class="timeline-source-text">{{val.r_person}}</span>
                </div>
                <div class="timeline-source-content" v-if="val.btn!=='disabled'">
                  <span class="timeline-source-text">
                    <at-button v-if="val.analysis_state==='1'" @click="goAnalyzeReport(val.analysis_id)">查看分析报告</at-button>
                  </span>
                </div>
              </div>
            </div>
        </div>
      </div>
    </li>
    <at-button type="text" @click="show_timeline" style="float: right;" v-show="TimeLine.length>4">{{this.count>5?'收起':'更多'}}</at-button>
</ul>

</template>

<script>
  export default {
    name: 'WarnTimeLine',
    props: {
      TimeLine: {
        type: Array,
        required: true
      },
      closeFunc: {
        type: Function
      }
    },
    data () {
      return {
        count: 4
      }
    },
    methods: {
      show_timeline () {
        this.count = this.count > 4 ? 4 : 999
      },
      goAnalyzeReport (analyzeId) {
        this.$router.push({ path: '/monitor/analyze/analysisReport', query: { row: this.$route.query.row, analyzeId: analyzeId } })
        // setTimeout(() => {
        //   this.closeFunc(this.path, 'remove')
        // }, 200)
      },
      goRiskEvents (riskEventId) {
        this.$router.push({ name: `@风险事项`, query: { riskEeventid: riskEventId } })
      }
    }
  }
</script>
<style lang="less" scoped>
.corr-text {
    display: block;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
    font-size: 12px;
   }
.warn-timeline {
  list-style: none;
  margin: 20px 0 0 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  .warn-timeline-item {
    margin: 0 !important;
    padding: 0;
    list-style: none;
    position: relative;
    .warn-timeline-item-tail {
      height: 48%;
      border-left: 1px solid #eeeeee;
      position: absolute;
      left: 80px;
      top: 63px;
    }
    &:last-child{
      .warn-timeline-item-tail {
        display: none;
      }
    }
    .warn-timeline-item-head {
        width: 10px;
        height: 10px;
        background-color: #1f92ef;
        border-radius: 50%;
        border: 1px solid transparent;
        position: absolute;
        top:13px;
        left:75px;
    }
    .warn-timeline-triangle{
      width:0;
      height:0;
      border-width:5px 10px 5px 0px;
      border-style:solid;
      border-color:transparent #eeeeee transparent transparent;
      position:absolute;
      top:13px;
      left:90px;
      span{
        display: block;
        width: 0;
        height: 0;
        border-bottom: 4px solid transparent;
        border-right: 8px solid #f8f9fa;
        border-top: 4px solid transparent;
        position: absolute;
        left: 2px;
        top: -4px;
      }
    }
    .warn-timeline-time-date{
      position: absolute;
      top:41px;
      left: 18px;
      color:#1f92ef;
    }
    .warn-timeline-time-hour{
      position: absolute;
      top:27px;
      left: 31px;
      color:#1f92ef;
    }
    .timeline-item-content {
      padding: 1px 1px 10px 100px;
      font-size: 12px;
      position: relative;
      margin-right: 20px;
      top: -3px;
      .time-title {
        color:#5c6781;
        font-size:12px;
        font-weight:700;
        display: inline-block;
        height: 30px;
        line-height: 30px;
      }
      .time-line {
        float: right;
        color: #8992a7;
        font-size: 12px;
      }
      .timeline-source{
          background-color: #f8f9fa;
          margin-top: 5px;
          width: 100%;
          border: 1px solid #eeeeee;
          padding: 0 20px;
          .timeline-source-content{
            min-height:38px;
            line-height:38px;
            .timeline-source-title {
              color:#8992a7;
              font-size:12px;
            }
            .timeline-source-text {
              color:#5c6781;
              font-size:12px;
            }
            .clear-float{
               clear:both;
               content:'';
               display:block;
               width:0;
               height:0;
               visibility:hidden; 
             }
            .Checkdetails{
              width: 60px;
              height: 30px;
              line-height: 30px ;
              background-color: red;
            }
          }
      }
    }
  }
}
</style>
